<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="7">
          <el-row>
              <el-form-item label="栋" prop="block">
                <el-input v-model="formData.block" placeholder="请输入栋" maxlength="10" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>
              <el-form-item label="层" prop="level">
                <el-input v-model="formData.level" placeholder="请输入层" maxlength="10" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>
              <el-form-item label="房号" prop="room">
                <el-input v-model="formData.room" placeholder="请输入房号" maxlength="10" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item label="报修说明" prop="remark">
            <el-input v-model="formData.remark" type="textarea" maxlength="50" placeholder="请输入报修说明"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="报修人联系方式" prop="contact">
            <el-input  v-model="formData.contact" placeholder="请输入报修人联系方式" maxlength="20" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

  </div>
</template>

<script>

import * as Api from "@/api/repair/repair";
import {noauthcreate} from "@/api/repair/repair";

export default {

  components: {},
  props: [],
  data() {
    return {
      formData: {
        id: undefined,
        block: undefined,
        level: undefined,
        room: undefined,
        remark: undefined,
        contact: undefined,
      },
      rules: {
        block: [{
          required: true,
          message: '请输入栋',
          trigger: 'blur'
        }],
        level: [{
          required: true,
          message: '请输入层',
          trigger: 'blur'
        }],
        room: [{
          required: true,
          message: '请输入房号',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请输入报修说明',
          trigger: 'blur'
        }],
        contact: [{
          required: true,
          message: '请输入报修人联系方式',
          trigger: 'blur'
        }],
      },
    }
  },
  methods: {
    async submitForm() {
      // 校验主表
      this.formLoading = true;
      try {
        const data = this.formData;
        // 添加的提交
        await Api.noauthcreate(data);
        this.$modal.msgSuccess("新增成功");
        this.dialogVisible = false;
        this.$emit('success');
      } finally {
        this.formLoading = false;
      }
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
